<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset = "utf-8">
	<link rel="stylesheet" type="text/css" href="work.css">
	<script type="text/javascript" src ="jquery-1.11.2.js"></script>
</head>
<body>
	<div class = "main">
		<div class = "header">
			<ul class = "header_ul">
				<li style = "background-color:#000"></li>
				<li style = "background-color:red"></li>
				<li style = "background-color:pink"></li>
				<li style = "background-color:#ececec"></li>
				<li style = "background-color:blue"></li>
				<li style = "background-color:yellow"></li>
				<li style = "background-color:#5d2dcc"></li>
				<li style = "background-color:#F63832"></li>
				<li style = "background-color:#F5CD19"></li>
				<li style = "background-color:#0C8484"></li>
				<li style = "background-color:#AC79B1"></li>
				<li style = "background-color:#F0FF95"></li>
			</ul>
			<div class = "header_div">
				<input type = "button" value = "设置线宽" id = "btn1">
				<input type = "button" value = "橡皮擦" id = "btn2">
			</div>
			<div class = "shezhi">
				<div class = "xiantiao">
					<div class = "xiantiao1" style = "height:2px"></div>
					<div class = "xiantiao1 xiantiao2" style = "height:5px"></div>
					<div class = "xiantiao1 xiantiao3" style = "height:10px"></div>
				</div>
				<div class = "xpc">
					<div class = "xpc1" style = "width:15px"></div>
					<div class = "xpc1 xpc2" style = "width:10px"></div>
					<div class = "xpc1 xpc3" style = "width:5px"></div>
				</div>
			</div>

			
		</div>
		<canvas id = "canvas" width = "600px" height = "399px"></canvas>
		<input type = "button" value = "清空" id = "mybtn">
	</div>
</body>
<script type="text/javascript">
	var canObj = document.getElementById("canvas"),
		cvContext = canObj.getContext("2d"),
		lastX,//画笔上次x轴坐标
		lastY,//画笔上一次y轴坐标
		ddd,
		keyFlag = false;//绘画标示1   鼠标按下时候  为true
		//设置线条连贯
		cvContext.lineCap = "round";
		canObj.onmousedown = function(e){
			e= e || window.event;
			//设置绘图标示为true
			keyFlag = true;
			//记录当前坐标你
			lastX = e.offsetX;
			lastY = e.offsetY;
		}
		//移动画笔
		canObj.onmousemove = function(e){
			e= e || window.event;
			//如果绘图标示为true  进行绘制
			if(keyFlag){
				cvContext.beginPath();
				cvContext.moveTo(lastX,lastY);
				cvContext.lineTo(e.offsetX, e.offsetY);
				cvContext.stroke();
				//更新上一次坐标
				lastX = e.offsetX;
				lastY = e.offsetY;
			}
		}
		//结束绘制
		canObj.onmouseup = function(e){
			e= e || window.event;
			keyFlag = false;
		}
		//事件委托 获取颜色
		$(".header_ul").on("click","li",function(e){
			e = e || window.event;
			var a = e.target.style.backgroundColor;
			console.log(a);
			cvContext.strokeStyle = a || "#000";
		});
		//获取线宽
		$(".xiantiao").on("click","div",function(e){
			e = e || window.event;
			b = e.target.style.height;
			var bb = b.slice(0, -2);
			cvContext.lineWidth = bb || 1;
		});
		//获取橡皮擦
		$(".xpc").on("click","div",function(e){
			e = e || window.event;
			var c = e.target.style.width;
			var cc = c.slice(0, -2);
			cvContext.lineWidth = cc || 5;
			cvContext.strokeStyle = "#fff";
		});
		//图形
		canObj.onclick = function(e){
			e = e || window.event;
			x = e.offsetX;
			y = e.offsetY;
			console.log(x,y);
			cvContext.beginPath();
			cvContext.arc(e.offsetX, e.offsetY, ddd, 0, 2*Math.PI);
			cvContext.stroke();
			$(".header_div1").on("click","div", function(e){
				e = e || window.event;
				var d = e.target.style.width;
				var dd = d.slice(0, -2);
				ddd = dd/2;
				return ddd;
			});
		}
		//清空画布
		$("#mybtn").on("click",function(){
			cvContext.clearRect(0,0,600,399);
		})
</script>
</html>